<template>
  <div>
    <ee-animation :z-index="zindex" v-if="overlay != 'none'" :appear="modelValue" animation="fade" :style="overlayStyle"
                  :class="'ee-popup ' + (overlay % 2 != 0 ? 'unclosable ' : '') + (overlay < 2 ? 'none ' : '') + (overlayClass ?? '')"
                  v-overlay="{ value: modelValue || $refs.eet?.isAppear, full: overlay < 6, hidden: !(overlay > 3), scrollable }"
                  @click.stop="() => { if (overlay % 2 == 0) modelValue = false }" v-bind="scopeId">
    </ee-animation><template v-else />
    <ee-animation :z-index="zindex" ref="eet" :appear="modelValue" :animation="animations"
                  @out="zindex = undefined" v-bind="__attrs" @click.stop>
      <slot></slot>
    </ee-animation>
  </div>
</template>

<script type="text/javascript">
import scoped from '../__mixin/scoped'
import { injectStore } from 'ee-vuex';
import { props } from './ee-popup'

/** 继承自ee-animation，可以传递其事件
 * @extends ee-animation
 */
export default injectStore({
  name: "ee-popup",
  mixins: [scoped],
  data() {
    return {
      zindex: undefined,
    }
  },
  props,
  computed: {
    animations() {
      const array = ['fade'];
      if (this.position) {
        array.push('move');
        if (this.position.constructor == Array)
          array.push(...this.position);
        else
          array.push(this.position);
      }
      return array;
    }
  }
})
</script>

<style lang="scss">
.ee-popup {
  &.unclosable {
    cursor: not-allowed;
  }

  &.none {
    pointer-events: none;
  }

  & > :first-child {
    cursor: auto;
    pointer-events: auto;
  }
}
</style>